<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟板块数据
const boardList = ref([
  {
    id: 1,
    boardName: '体育',
    moderatorEmail: 'mod1@example.com',
  },
  {
    id: 2,
    boardName: '生活',
    moderatorEmail: 'mod2@example.com',
  },
  {
    id: 3,
    boardName: '学习',
    moderatorEmail: 'mod3@example.com',
  },
])

// 控制更改版主对话框显示与隐藏
const changeModeratorDialogVisible = ref(false)
// 当前操作的板块信息
const currentBoard = ref({
  id: 0,
  boardName: '',
  moderatorEmail: '',
})
// 新的版主邮箱
const newModeratorEmail = ref('')

// 打开更改版主对话框
const handleChangeModerator = (board: any) => {
  currentBoard.value = { ...board }
  newModeratorEmail.value = ''
  changeModeratorDialogVisible.value = true
}

// 提交更改版主信息
const handleSubmitChange = () => {
  if (!newModeratorEmail.value) {
    ElMessage.warning('请输入新的版主邮箱')
    return
  }

  ElMessageBox.confirm(
    `确定要将 ${currentBoard.value.boardName} 板块的版主从 ${currentBoard.value.moderatorEmail} 更换为 ${newModeratorEmail.value} 吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      // 模拟更新本地数据
      const index = boardList.value.findIndex(
        (item) => item.id === currentBoard.value.id,
      )
      if (index !== -1) {
        boardList.value[index].moderatorEmail =
          newModeratorEmail.value
      }
      ElMessage.success('版主更换成功')
      changeModeratorDialogVisible.value = false

      // 这里添加实际向后端发送请求的逻辑
      // 携带原来版主用户和新的版主用户邮箱
      // 示例：
      // axios.post('/api/change-moderator', {
      //   boardId: currentBoard.value.id,
      //   oldModeratorEmail: currentBoard.value.moderatorEmail,
      //   newModeratorEmail: newModeratorEmail.value
      // })
    })
    .catch(() => {
      ElMessage.info('已取消操作')
    })
}
</script>

<template>
  <div>
    <el-table :data="boardList" style="width: 100%">
      <el-table-column prop="boardName" label="板块名" />
      <el-table-column
        prop="moderatorEmail"
        label="版主邮箱"
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleChangeModerator(scope.row)"
            >更改版主</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 更改版主对话框 -->
    <el-dialog
      v-model="changeModeratorDialogVisible"
      title="更改版主"
    >
      <el-form label-width="100px">
        <el-form-item label="板块名">
          <span>{{ currentBoard.boardName }}</span>
        </el-form-item>
        <el-form-item label="原版主邮箱">
          <span>{{ currentBoard.moderatorEmail }}</span>
        </el-form-item>
        <el-form-item label="新版主邮箱">
          <el-input
            v-model="newModeratorEmail"
            placeholder="请输入新的版主邮箱"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="changeModeratorDialogVisible = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="handleSubmitChange"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
/* 可添加自定义样式 */
</style>
